import React, { useEffect, useState } from 'react'
import style from './createProject.module.scss'
import { useActions } from '../../../starter/hooks/actions'
import { useAppSelector } from '../../../starter/hooks/redux'
import dayjs, { Dayjs } from 'dayjs'
import { DatePicker, Input, Select } from 'antd'
import { IAntSelectOption } from '../../../starter/model/interfaces'


type TCreateEmployee = {

}

export default function CreateProject({}: TCreateEmployee) {
  const {setTmpProject} = useActions()
  const { project } = useAppSelector(state => state.tmp)

  const { projectManagers } = useAppSelector(state => state.projectManagers)
  const { employees } = useAppSelector(state => state.employees)

  const [projectManagerOptions, setProjectManagerOptions] = useState<IAntSelectOption[]>([])
  const [employeesOptions, setEmployeesOptions] = useState<IAntSelectOption[]>([])

  useEffect(() => {
    setProjectManagerOptions(
      projectManagers.map(p => ({
        value: p._id,
        label: `${p.firstName} ${p.lastName}`
      }))
    )
  }, [projectManagers])

  useEffect(() => {
    setEmployeesOptions(
      employees.map(p => ({
        value: p._id,
        label: `${p.firstName} ${p.lastName}`
      }))
    )
  }, [projectManagers])


  const handleInputChange = (evt: any): void => {
    if (evt.target) {
      const { name, value } = evt.target
      setTmpProject({
        ...project,
        [name]: value,
      })
    }
  }
  const handleInputChangeDate = (name: string, date: Dayjs, dateString: string | string[]): void => {
    setTmpProject({
      ...project,
    [name]: date.toDate(),
    })
  }

  const handlerOnSelectSelector = (name: string, source: any[], value: string, option: IAntSelectOption) => {
    setTmpProject({
      ...project,
      [name]: {...source.find(item => item._id === value)},
    })
  }

  return (
    <div className={style.wrapper}>
      <label className={style.inputLabel}>
        Название проекта
        <Input
          className={style.input}
          name='title'
          placeholder='Название проекта'
          value={project.title}
          onChange={handleInputChange}
        />
        {/*<span className={`${formErrors.name ? 'register__input-error' : ''}`}>{formErrors.name}</span>*/}
      </label>
      <label className={style.inputLabel}>
        Код проекта
        <Input
          className={style.input}
          name='code'
          placeholder='Код проекта'
          value={project.code}
          onChange={handleInputChange}
        />
        {/*<span className={`${formErrors.name ? 'register__input-error' : ''}`}>{formErrors.name}</span>*/}
      </label>
      <label className={style.inputLabel}>
        начало проекта
        <br/>
        <DatePicker
          style={{margin: '0.5rem 0'}}
          name='from'
          value={project.from && dayjs(project.from)}
          onChange={(date, dateString) => { handleInputChangeDate('from', date, dateString) }}
        />
        {/*<span className={`${formErrors.name ? 'register__input-error' : ''}`}>{formErrors.name}</span>*/}
      </label>
      <br/>
      <label className={style.inputLabel}>
        Окончание проекта
        <br/>
        <DatePicker
          style={{margin: '0.5rem 0'}}
          name='birthDay'
          value={project.to && dayjs(project.to)}
          onChange={(date, dateString) => { handleInputChangeDate('to', date, dateString) }}
        />
        {/*<span className={`${formErrors.name ? 'register__input-error' : ''}`}>{formErrors.name}</span>*/}
      </label>
      <br/>
      <label className={style.inputLabel}>
        Менеджер проекта
        <br/>
        <Select
          showSearch
          // style={{ width: 200 }}
          value={project.manager?._id}
          placeholder="Выберите менеджера проекта"
          optionFilterProp="label"
          filterSort={(optionA, optionB) =>
            (optionA?.label ?? '').toLowerCase().localeCompare((optionB?.label ?? '').toLowerCase())
          }
          options={projectManagerOptions}
          onSelect={(value: string, option: IAntSelectOption) => {handlerOnSelectSelector('manager', projectManagers, value, option)}}
        />
      </label>
      <br/>
      <label className={style.inputLabel}>
        Ответственный сотрудник
        <br/>
        <Select
          showSearch
          // style={{ width: 200 }}
          value={project.responsibleEmployee?._id}
          placeholder="Выберите отвественного сотрудника"
          optionFilterProp="label"
          filterSort={(optionA, optionB) =>
            (optionA?.label ?? '').toLowerCase().localeCompare((optionB?.label ?? '').toLowerCase())
          }
          options={employeesOptions}
          onSelect={(value: string, option: IAntSelectOption) => {handlerOnSelectSelector('responsibleEmployee', employees, value, option)}}
        />
      </label>
    </div>
  )
}
